/**
 *  Copyright Kirk Technologies.
 */

import * as React from "react";
import MuiGridList from "@material-ui/core/GridList";
import GridListTile from "@material-ui/core/GridListTile";
import GridListTileBar from "@material-ui/core/GridListTileBar";
import { withStyles } from "@material-ui/core/styles";
import IconButton from "@material-ui/core/IconButton";
import ContentCreate from "@material-ui/icons/Create";
import { Link } from "react-router-dom";
import { NumberField } from "react-admin";
import { linkToRecord } from "ra-core";

const styles = {
    root: {
        margin: "-2px",
    },
    gridList: {
        width: "100%",
        margin: 0,
    },
    tileBar: {
        background: "linear-gradient(to top, rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 70%,rgba(0,0,0,0) 100%)",
    },
    price: {
        display: "inline",
        fontSize: "1em",
    },
    link: {
        color: "#fff",
    },
};

export const GridList = withStyles(styles)(({ classes, ids, data, basePath }: any) => (
    <div className={classes.root}>
        <MuiGridList cellHeight={180} cols={4} className={classes.gridList}>
            {ids.map((id: any) => (
                <GridListTile key={id}>
                    <img src={data[id].thumbnail} alt="" />
                    <GridListTileBar
                        className={classes.tileBar}
                        title={data[id].reference}
                        subtitle={
                            <span>
                                {data[id].width}x{data[id].height},{" "}
                                <NumberField
                                    className={classes.price}
                                    source="price"
                                    record={data[id]}
                                    color="inherit"
                                    options={{
                                        style: "currency",
                                        currency: "USD",
                                    }}
                                />
                            </span>
                        }
                        actionIcon={
                            <IconButton
                                to={linkToRecord(basePath, data[id].id)}
                                className={classes.link}
                                component={Link}
                            >
                                <ContentCreate />
                            </IconButton>
                        }
                    />
                </GridListTile>
            ))}
        </MuiGridList>
    </div>
));
